<template>
    <view class="timer-container">
        <view class="time-display">
            <text>总时间：{{ formatTime(totalTime) }}</text>
            <text>重新计时时间：{{ formatTime(reTotalTime) }}</text>
        </view>
        <view class="segment-display">
            <view v-for="(item, index) in segments" :key="index">
                <text>分段 {{ index + 1 }}：{{ formatTime(item.segment) }}</text>
                <text>+{{ formatTime(item.difference) }}</text> 
            </view>
        </view>
        <view class="button-group">
            <button @click="toggleTimer">{{ isPaused? '继续' : '暂停' }}</button>
            <button @click="resetTimer" :disabled="!isPaused">重置</button>
            <button @click="recordSegment" :disabled="isPaused">分段计时</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            totalTime: 0,
            segments: [],
            timerId: null,
            isPaused: true,
            reTotalTime: 0,
            pauseStartTime: null
        };
    },
    methods: {
        toggleTimer() {
            this.isPaused = !this.isPaused;
            if (!this.isPaused) {
                const now = Date.now();
                if (this.pauseStartTime) {
                    const pauseDuration = now - this.pauseStartTime;
                    this.reTotalTime += pauseDuration;
                }
                this.timerId = setInterval(() => {
                    this.totalTime += 10;
                    this.reTotalTime += 10;
                }, 10);
                this.pauseStartTime = null;
            } else {
                this.pauseStartTime = Date.now();
                clearInterval(this.timerId);
            }
        },
        resetTimer() {
            clearInterval(this.timerId);
            this.totalTime = 0;
            this.segments = [];
            this.isPaused = true;
            this.reTotalTime = 0;
            this.pauseStartTime = null;
        },
        recordSegment() {
            if (!this.isPaused) {
                this.segments.push({
                    segment: this.totalTime,
                    difference: this.totalTime - (this.segments.length > 0 ? this.segments[this.segments.length - 1].segment : 0)
                });
                this.reTotalTime = 0;
            }
        },
        formatTime(milliseconds) {
            const totalSeconds = Math.floor(milliseconds / 1000);
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;
            const ms = milliseconds % 1000;
            // return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0').substr(0, 2)}`;
			return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0').substr(0, 2)}`;
        }
    }
};
</script>

<style>
.timer-container {
    text-align: center;
    padding: 20px;
}
.time-display {
    font-size: 18px;
    margin-bottom: 10px;
}
.segment-display {
    margin-bottom: 20px;
    font-size: 16px;
}
.button-group button {
    margin: 5px 0;
    padding: 10px 20px;
    width: 100%;
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
</style>    